<template>
  <div class="alls" @mousemove="fn($event)" @mouseleave="fn1" ref="all">
    <img :src="imgUrl" ref="box" />
  </div>
</template>

<script>
export default {
    props:{
        imgUrl:String,
        Xsize:Number,
        Ysize:Number,
        time:Number
    },
    data(){
        return{
            X:0,
            Y:0,
            a:0,
            b:0
        }
    },
    methods:{
        fn(e){
            // console.log(this.$refs.all.offsetWidth,this.$refs.all.offsetHeight,'盒子的宽度')
            // console.log(this.$refs.all)
            // 获取元素的绝对位置坐标（像对于页面左上角）
            this.a = this.getElementPagePosition(this.$refs.all).x+this.$refs.all.offsetWidth/2
            this.b = this.getElementPagePosition(this.$refs.all).y+this.$refs.all.offsetHeight/2
            // console.log(this.a,this.b,'盒子中点相对于左上角的的坐标')
            // console.log(e.pageX,e.pageY,'鼠标相对于左上角的坐标')
            this.X = (e.pageX - this.a)
            this.Y = (e.pageY - this.b)
            // console.log(this.X,this.Y)
            let redis =()=>{
                let XX = 0
                let YY = 0
                if(this.X>0&this.Y>0){
                    XX = '-'+this.X
                    YY = '-'+this.Y
                }else if(this.X>0&this.Y<0){
                    XX = '-'+this.X
                    YY = this.Y.toString().substring(1)
                }else if(this.X<0&this.Y>0){
                    XX = this.X.toString().substring(1)
                    YY = '-'+this.Y
                }else{
                    XX = this.X.toString().substring(1)
                    YY = this.Y.toString().substring(1)
                }
                // console.log(XX,YY,'相对中点坐标')
                return `transform: translate(${XX/this.$props.Xsize}px,${YY/this.$props.Ysize}px)`
            }
            this.$refs.box.style.cssText=redis()
        },
        fn1(){
            // new Promise((resolve,reject)=>{
            //     this.$refs.box.animate({ "transform": "translate(0px,0px)" }, this.$props.time)
            //     resolve()
            // }).then(
            //     this.$refs.box.style.cssText = `transform: translate(0px,0px)`
            // )

            this.$refs.box.style.cssText = `transform: translate(0px,0px)`
            this.$refs.box.addEventListener('transtionend',function(){
                this.$refs.bigBox.style.cssText = `transform: rotateY(0px,0px)`
            })

            // this.$refs.box.animate({ "transform": "translate(0px,0px)" }, this.$props.time);
            // setTimeout(()=>{
            //     this.$refs.box.style.cssText = `transform: translate(0px,0px)`
            // },this.$props.time-20)
        },
        getElementPagePosition(element){
            //计算x坐标
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;
            while (current !== null){
                actualLeft += current.offsetLeft;
                current = current.offsetParent;
            }
            //计算y坐标
            var actualTop = element.offsetTop;
            var current = element.offsetParent;
            while (current !== null){
                actualTop += (current.offsetTop+current.clientTop);
                current = current.offsetParent;
            }
            //返回结果
            // console.log(actualLeft,actualTop,'dom元素的左上角相对于屏幕左上角的坐标')//dom元素的左上角相对于屏幕左上角的坐标
            return {x: actualLeft, y: actualTop}
        }
    }
}
</script>

<style scoped>
    img{
        width:100%;
        height:100%;
        transition:transform 0.5s;
    }
    .alls{
        height:100%;
        width: 100% !important;
        overflow: hidden;
    }
</style>